<template>
    <el-container>
        <el-aside width="400px" style="padding-top: 20px;">

            <el-card :body-style="{ padding: '0px' }">
                <img :src="userInfo.userImg" class="image">
                <div>
                    <el-button type="text" @click="dialogTableVisible = true" class="bottom-clearfix"> 修改信息</el-button>
                    <el-dialog title="修改用户信息" :visible.sync="dialogTableVisible">
                        <el-form :visible.sync="dialogTableVisible" :model="userInfo"  label-width="100px" ref="ruleForm"
                            class="demo-ruleForm">
                            <el-form-item label="用户头像" >
                                <el-input type="text" v-model="userInfo.userImg"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名字" >
                                <el-input type="text" v-model="userInfo.userName"></el-input>
                            </el-form-item>
                            <el-form-item label="用户密码" >
                                <el-input type="text" v-model="userInfo.userPassword"></el-input>
                            </el-form-item>
                            <el-form-item label="区" >
                                <el-input type="text"  v-model="userInfo.address.region"></el-input>
                            </el-form-item>
                            <el-form-item label="街道"  >
                                <el-input v-model="userInfo.address.street"></el-input>
                            </el-form-item>
                            <el-form-item label="详细地址" >
                                <el-input type="text"  v-model="userInfo.address.detailAddress"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateinfo()">提交</el-button>
                                <el-button @click="getinfo()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </el-card>
        </el-aside>
        <el-container>
            <el-main>

                <el-card class="box-card">
                    <div>
                        <el-divider content-position="left">用户名字</el-divider>
                        {{ userInfo.userName }}
                    </div>
                    <div>
                        <el-divider content-position="left">区</el-divider>
                        {{ userInfo.address.region }}
                    </div>
                    <div>
                        <el-divider content-position="left">街道</el-divider>
                        {{ userInfo.address.street }}
                    </div>
                    <div>
                        <el-divider content-position="left">详细地址</el-divider>
                        {{ userInfo.address.detailAddress }}
                    </div>
                    <div>
                        <button style="width: 100%;height: 100%;font-size: larger;" @click="goUserOrders()">我的订单</button>
                    </div>
                </el-card>


            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import userApi from "@/api/apiPb/User_order";
    export default{
        data(){
            return{
                userInfo:{},
                dialogTableVisible: false,
                userId:0
            }
        },
        created(){
            this.userId=this.$route.query.userId;
            console.log(this.userId);
            this.getinfo();
        },
        methods:{
            getinfo(){
                userApi.getUserInfo(this.userId).then(res=>{
                    this.userInfo=res.data.data;
                    console.log(this.userInfo);
                })
            },
            updateinfo(){
                this.userInfo.userId=this.userId;
                userApi.updateUserInfo(this.userInfo).then(res=>{
                    alert(res.data.msg)
                })
            },
            goUserOrders(){
                this.$router.push({path:'/UserOrderPage/UserOrders',query: {userId:this.userId}})
            }
               
            
    }
}
</script>